<template lang="html">
  <div id="pageBox">
    <div class="firstPage" v-if="step==1">
      <Banner :banner="bannerList" :highBottom="true"></Banner>
      <div class="content bgStyle pd30">
        <div class="cTitle">
          <ul class="titleBox">
            <li class="titleItem">
              <p class="num">{{ learnInfo.learnedTotalDay || 0 }}天</p>
              <p class="note">坚持阅读</p>
            </li>
            <li class="titleItem">
              <p class="num">{{ learnInfo.learnTotalTime || 0 }}分钟</p>
              <p class="note">学习时长</p>
            </li>
            <li class="titleItem">
              <p class="num">{{ learnInfo.learnTotalBooks || 0 }}本</p>
              <p class="note">已读书籍</p>
            </li>
          </ul>
        </div>
        <div class="bookImg">
          <img :src="learnInfo.bookImg" alt="">
        </div>
        <div class="bookName">
          {{ learnInfo.bookName }}
        </div>
        <div class="day">
          第{{ learnInfo.learnedDay || 0 }}/{{ learnInfo.needLearnDays || 0 }}天
        </div>
        <div class="button" @click="onStudy">
          开始学习
        </div>
      </div>
    </div>
    <div class="study"  v-if="step==2">
      <BgStyle>
        <div class="bgImg" slot="img">

        </div>
        <div class="content pd30" slot="content">
          <div class="titleBox">
            <div class="imgBox">
              <img :src="bookInfo.coverImg" alt="">
            </div>
            <div class="tContent">
              <div class="cTitle">
                《{{ bookInfo.bookName }}》
              </div>
              <div class="note">
                作者：{{ bookInfo.author }}
              </div>
              <div class="note">
                学习形式：{{ bookInfo.learningStyle }}
              </div>
              <div class="note">
                预计阅读本篇需要16分钟
              </div>
              <div class="tag">
                精读
              </div>
              <div class="day">
                第{{ learnInfo.learnedDay || 0 }}/{{ learnInfo.needLearnDays || 0 }}天
              </div>
            </div>
          </div>
          <div class="bookContent">
            <div class="bookTitle">
              几句话对书的总结
            </div>
            <div class="bookContent">
              {{ bookInfo.intro }}
            </div>
          </div>
          <div class="button" @click="gotoPage">
            开始学习
          </div>
        </div>
      </BgStyle>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/banner"
import BgStyle from "@/components/bgStyle"

import { getToday, getBook } from '@/api/pay'
import { getBanner } from '@/api/project'

export default {
  components:{
    Banner,
    BgStyle
  },
  data(){
    return {
      bannerList:[],
      step:1,
      learnInfo: {},
      bookInfo: {}
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData() {
      getToday().then(res => {
        this.learnInfo = res.data
        sessionStorage.setItem('learnInfo', JSON.stringify(res.data))
      })
      getBanner().then(res => {
        this.bannerList = res.page.list;
      })
    },
    onStudy() {
      const { bookId } = this.learnInfo
      getBook(bookId).then(res => {
        this.bookInfo = res.book
        this.bookInfo.dayNumId = res.readingDayNumId
        this.step = 2
      })
    },
    gotoPage(){
      const { dayNumId, bookName } = this.bookInfo
      let query = {
        dayNumId, bookName, chap: 1
      }
      this.$router.push({
        path:"/payReadContent",
        query
      })
    },
    
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    width:100%;
    height:100%;
    overflow: hidden;
    .firstPage{
      .content{
        text-align: center;
        &.bgStyle{
          position:relative;
          width:100%;
          height:calc(100vh - 1.78rem);
          margin-top:-0.2rem;
          background:#fff;
          border-radius: 0.2rem 0.2rem 0 0;
          z-index: 1;
        }
        .cTitle{
          .titleBox{
            display: flex;
            padding:20px 0;
            border-bottom:1px dashed #dedede;
            .titleItem{
              flex:1;
              text-align: center;
              .num{
                font-size:0.16rem;
              }
              .note{
                font-size:0.12rem;
                color:#999;
              }
            }
          }
        }
        .bookImg{
          height:1.8rem;
          padding:0.2rem 0;
          text-align: center;
          img{
            display: inline-block;
            height:100%;
            width:1.1rem;
            background:#999;
          }
        }
        .bookName{
          font-size:0.18rem;
        }
        .day{
          color:#999;
          font-size:0.12rem;
          margin:0.08rem 0 0.05rem 0;
        }
        .button{
          color:#fff;
          height:0.46rem;
          line-height: 0.46rem;
          font-size:0.14rem;
          border-radius: 0.23rem;
          background:#31c27c;
        }
      }
    }
    .study{
      .content{
        .titleBox{
          display: flex;
          height:1.4rem;
          padding:0.2rem 0;
          border-bottom:1px dashed #dedede;
          .imgBox{
            width:1rem;
            height:1.4rem;
            img{
              display: inline-block;
              width:100%;
              height:1.4rem;
              margin-top:-0.4rem;
              background:#333;
            }
          }
          .tContent{
            flex:1;
            padding-left:0.1rem;
            position:relative;
            .cTitle{
              color:#444;
              font-size:0.18rem;
            }
            .note{
              padding-left:0.1rem;
              color:#999;
              font-size:0.12rem;
              // line-height: 0.26rem;
            }
            .tag{
              position:absolute;
              top:0;
              right:0;
              font-size:0.12rem;
              color:red;
              border:1px solid red;
              padding:0.01rem 0.06rem;
            }
            .day{
              position:absolute;
              bottom:0;
              right:0;
              font-size:0.12rem;
              line-height: 0.12rem;
            }
          }
        }
        .bookContent{
          .bookTitle{
            font-size:0.16rem;
            padding:0.1rem 0;
          }
          .bookContent{
            color:#999;
            line-height: 0.24rem;
            font-size:0.14rem;
          }
        }
        .button{
          text-align: center;
          position:absolute;
          left:8%;
          bottom:0.2rem;
          color:#fff;
          width:84%;
          height:0.46rem;
          line-height: 0.46rem;
          font-size:0.14rem;
          border-radius: 0.23rem;
          background:#31c27c;
        }
      }
    }
  }
</style>
